<template>
  <div class="app-container">
    <div ref="refsTable">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <div style="display: inline">
          <el-form-item prop="timeType">
            <el-select v-model="queryParams.timeType" clearable style="width:120px;margin-right:10px ">
              <el-option v-for="item in dateList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="queryParams.startTime" style="width: 160px;margin-left: -2px"
              value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </div>

        <el-form-item label="送检单位" prop="inspectionUnit">
          <el-input v-model="queryParams.inspectionUnit" placeholder="请输入送检单位" clearable style="width: 230px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="项目类型" prop="projectTypeId">
          <el-autocomplete
            class="inline-input"
            v-model="queryParams.projectTypeName"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="handleSelectProject"
            @focus="change(0)"
            style="width:230px"
            clearable
          ></el-autocomplete>
          <!-- <el-select v-model="queryParams.projectTypeId" placeholder="全部" clearable style="width: 230px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select> -->
        </el-form-item>

        <el-form-item label="区域" prop="wardMame">
          <el-input v-model="queryParams.wardMame" placeholder="请输入区域" clearable style="width: 230px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <!--还没对-->
        <el-form-item label="审核者" prop="sampleTypeId">
          <el-autocomplete
            class="inline-input"
            v-model="queryParams.userName"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="handleSelectUser"
            @focus="change(1)"
            style="width:230px"
            clearable
          ></el-autocomplete>
        </el-form-item>

        <el-form-item label="核酸类型" prop="nucleicAcidTypeId">
          <el-select v-model="queryParams.nucleicAcidTypeId" placeholder="全部" clearable style="width: 230px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in nucleicAcidTypeArr" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="科室" prop="departmentName">
          <el-input v-model="queryParams.departmentName" placeholder="请输入科室" clearable style="width: 230px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="性别" prop="targetSex">
          <el-select v-model="queryParams.targetSex" placeholder="全部" clearable style="width: 230px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in sexChoose" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="姓名" prop="submitName">
          <el-input v-model="queryParams.submitName" placeholder="请输入姓名" clearable style="width: 230px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="是否外包" prop="isOutsourcers">
          <el-select v-model="queryParams.isOutsourcers" placeholder="全部" clearable style="width: 230px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in outsourcersChoose" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="条形码" prop="barcodeCode">
          <el-input v-model="queryParams.barcodeCode" placeholder="请输入条形码" clearable style="width: 230px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="手机号" prop="phone" style="margin-right: 0">
          <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable style="width: 230px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>



        <el-form-item label="状态" prop="mainState">
          <el-select v-model="queryParams.mainState" placeholder="全部" clearable size="small" style="width: 230px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in statusList" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="1.5">

        </el-col>
        <el-col :span="1.5">
          <!--        <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>-->
          <el-dropdown trigger="click">
            <el-button type="primary" size="mini">
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleExport('now')">导出当前</el-dropdown-item>
              <el-dropdown-item @click.native="handleExport('all')">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
    <el-table :row-class-name="rowStyle" border highlight-current-row v-loading="loading" :data="typeList"
      @selection-change="handleSelectionChange" :height="heights" :header-cell-style="{
        background: '#ebebeb'
      }">
      <el-table-column label="序号" align="center" type="index" />
      <af-table-column label="条码号" align="center" prop="barcodeCode" width="120" />
      <af-table-column label="样本状态" align="center" prop="mainState">
        <template slot-scope="scope">
          <!-- {{ scope.row.mainState == 6 ? analyzeSubStateName[scope.row.mainState] : mainStateName[scope.row.mainState] }} -->
          {{ mainStateName[scope.row.mainState] }}
        </template>
      </af-table-column>
      <af-table-column label="归档状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '已作废' : '已提交' }}
        </template>
      </af-table-column>
      <af-table-column label="录入时间" align="center" prop="registerCreateDate" width="160" />
      <af-table-column label="入库日期" align="center" prop="inputDate" width="160" />

      <af-table-column label="DNA报告日期" align="center" prop="dnaReportDate" width="160"/>
      <af-table-column label="RNA报告日期" align="center" prop="rnaReportDate" width="160"/>
      <af-table-column label="受检者姓名" align="center" prop="submitName" />
      <af-table-column label="受检者性别" align="center" prop="targetSex">
        <template slot-scope="scope">
          {{ sexName[scope.row.targetSex] }}
        </template>
      </af-table-column>
      <af-table-column label="受检者年龄" align="center" prop="targetAge" />
      <af-table-column label="样本类型" align="center" prop="sampleTypeName" width="150" />
      <af-table-column label="检测流程" align="center" prop="nucleicTypeName" width="100" />
      <af-table-column label="区域" align="center" prop="wardMame" />
      <af-table-column label="送检单位" align="center" prop="inspectionUnit" />
      <af-table-column label="科室" align="center" prop="departmentName" />
      <af-table-column label="送检医生" align="center" prop="applyDoctorName" />
      <af-table-column label="医生电话" align="center" prop="doctorPhone" />
      <af-table-column label="是否外包" align="center" prop="isOutsourcers">
        <template slot-scope="scope">
          {{ scope.row.isOutsourcers === 0 ? '否' : '是' }}
        </template>
      </af-table-column>
      <af-table-column label="外包商名称" align="center" prop="outName" />
      <af-table-column label="外包商负责人" align="center" prop="responseName" />
      <af-table-column label="外包商负责人电话" align="center" prop="phone" />
      <af-table-column label="审核者" align="center" prop="userName" />
      <!--      <af-table-column label="发送报告状态" align="center" prop="outName"  />-->
      <af-table-column label="DNA结果" align="center" prop="dnaResults" />
      <af-table-column label="DNA检出病原" align="center" prop="dnaDetectablePathogen" />
      <af-table-column label="RNA结果" align="center" prop="rnaResults" />
      <af-table-column label="RNA检出病原" align="center" prop="rnaDetectablePathogen" />
      <af-table-column label="DNA报告" align="center" prop="dnaReporting" />
      <af-table-column label="RNA报告" align="center" prop="rnaReporting" />
      <af-table-column label="备注" align="center" prop="remark" />

    </el-table>
    <div>
      <pagination   style="margin:0;padding: 0;" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { placeOnList } from '@/api/comprehensiveSearchManage/archive'
import { professional } from '@/api/dictionary/systemDictionary/professional'
import { projectType } from '@/api/dictionary/systemDictionary/projectType'
import { sampleType } from '@/api/dictionary/systemDictionary/sampleType'
import { manageBackList } from '@/api/comprehensiveSearchManage/fallback'
import { arr, Arr } from "@/utils/data.js";
import { listUser } from '@/api/system/user.js'
import { nucleicAcidTypeArr} from "@/api/commonArr/index.js"
export default {
  name: 'print',
  data () {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        
      },
      nucleicAcidTypeArr:[],
      userList:[],
      projectTypeList2:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 预警数据
      typeList: [],
      // 专业组数据
      professionalList: [],
      // 项目数据
      projectTypeList: [],
      // 样本数据
      sampleTypeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 登记日期范围
      dateRange: [],
      // 录入时间范围
      entryRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        timeType: 1,
        startTime: undefined,
        endTime: undefined,
        inspectionUnit: undefined,
        projectTypeId: '',
        wardMame: undefined,
        sampleTypeId: '',
        nucleicAcidTypeId: '',
        targetSex: '',
        submitName: undefined,
        isOutsourcers: '',
        barcodeCode: undefined,
        phone: undefined,
        mainState: '',

      },
      mainStateName: {
        1: '已录入',
        2: '已登记',
        3: '已入库',
        4: '已提取',
        5: '已建库',
        6: '已测序',
        7: '已分析',
        8: '已初审',
        9: '已确认初审',
        10: '已复审',
        11: '已提交',
        12: '已上传',
        13: '不上传'
      },
      analyzeSubStateName: {
        0: '待分析',
        1: '分析中',
        2: '分析失败',
        3: '分析成功'
      },
      sexName: {
        0: '未知',
        1: '男',
        2: '女'
      },
      sexChoose: [
        {
          id: 0,
          title: '未知'
        },
        {
          id: 1,
          title: '男'
        },
        {
          id: 2,
          title: '女'
        }
      ],
      outsourcersChoose: [
        {
          id: 0,
          title: '否'
        },
        {
          id: 1,
          title: '是'
        }
      ],
      dateList: [
        {
          title: '录入时间',
          id: 1
        },
        {
          title: '入库日期',
          id: 2
        }
      ],
      statusList: [
        {
          title: '已录入',
          id: 1
        },
        {
          title: '已登记',
          id: 2
        },
        {
          title: '已入库',
          id: 3
        },
        {
          title: '已提取',
          id: 4
        },
        {
          title: '已建库',
          id: 5
        },
        {
          title: '已测序',
          id: 6
        },
        {
          title: '已分析',
          id: 7
        },
        {
          title: '已初审',
          id: 8
        },
        {
          title: '已确认初审',
          id: 9
        },
        {
          title: '已复审',
          id: 10
        },
        {
          title: '已提交',
          id: 11
        },
        {
          title: '已上传',
          id: 12
        },
        {
          title: '不上传',
          id: 13
        }
      ],
      heights: undefined
    }
  },
  created () {
    Arr.projectTypeArr.map(el=>{
      this.projectTypeList2.push({
        value:el.name,
        id:el.id
      })
    }) 
    listUser().then(res => {
      res.rows.map(el=>{
        this.userList.push({
          value:el.userName,
          id:el.userId
        })
      })
      })
    this.queryParams.startTime = this.parseTime(new Date((new Date).getTime() ), '{y}-{m}-{d}')
    this.queryParams.endTime = this.parseTime(new Date((new Date).getTime() ), '{y}-{m}-{d}')
    this.getList()
    this.otherList()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      }
    })
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.projectTypeList2,
        this.userList
      ];
      return array;
    },
    handleSelect(item) {
      console.log(item);
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    handleSelectProject(item){
      this.queryParams.projectTypeId=item.id
    },
    handleSelectUser(item){
      this.queryParams.userId=item.id
    },
    /** 预警 */
    getList () {
      this.loading = true
      placeOnList(this.queryParams).then(response => {
        this.typeList = response.rows
        this.total = response.total
        this.loading = false
      }
      )
    },
    otherList () {
      nucleicAcidTypeArr().then(res => {
  this.nucleicAcidTypeArr = res.rows
})
      professional().then(response => {
        this.professionalList = response.rows
      })
      projectType().then(response => {
        this.projectTypeList = response.rows
      })
      sampleType().then(response => {
        this.sampleTypeList = response.rows
      })
    },
    // 表单重置
    reset () {
      this.form = {
        pageNum: 1,
        pageSize: 20,
        timeType: 1,
        startTime: undefined,
        endTime: undefined,
        inspectionUnit: undefined,
        projectTypeId: undefined,
        wardMame: undefined,
        sampleTypeId: undefined,
        nucleicAcidTypeId: undefined,
        targetSex: undefined,
        submitName: undefined,
        isOutsourcers: undefined,
        barcodeCode: undefined,
        phone: undefined,
        mainState: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.endTime = this.queryParams.startTime
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.surplus = undefined
      this.timeUnit = undefined
      this.resetForm('queryForm')
      this.queryParams.startTime = undefined
      this.queryParams.endTime = undefined
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // /** 导出按钮操作 */
    handleExport (e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.queryParams //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      this.$confirm('是否确认导出' + different + '数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        loading = that.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        placeOnList(params).then((response) => {
          let mydata = [
            [
              '序号',
              '条码号',
              '样本状态',
              '归档状态',
              '录入时间',
              '入库日期',
              'DNA报告日期',
              'RNA报告日期',
              '受检者姓名',
              '受检者性别',
              '受检者年龄',
              '样本类型',
              '检测流程',
              '区域',
              '送检单位',
              '科室',
              '送检医生',
              '医生电话',
              '是否外包',
              '外包商名称',
              '外包商负责人',
              '外包商负责人电话',
              '审核者',
              'DNA结果',
              'DNA检出病原',
              'RNA结果',
              'RNA检出病原',
              'DNA报告',
              'RNA报告',
              '备注',
            ],
            ...response.rows.map((item, index) => ([
              index + 1,
              item.barcodeCode,
              item.mainState === 6 ? that.analyzeSubStateName[item.mainState] : that.mainStateName[item.mainState],
              item.status === 0 ? '作废' : '已提交',
              item.registerCreateDate,
              item.inputDate,
              item.dnaReportDate,
              item.rnaReportDate,
              item.submitName,
              that.sexName[item.targetSex],
              item.targetAge,
              item.sampleTypeName,
              item.nucleicTypeName,
              item.wardMame,
              item.inspectionUnit,
              item.departmentName,
              item.applyDoctorName,
              item.doctorPhone,
              item.isOutsourcers === 0 ? '否' : '是',
              item.outName,
              item.responseName,
              item.phone,
              item.userName,
              item.dnaResults,
              item.dnaDetectablePathogen,
              item.rnaResults,
              item.rnaDetectablePathogen,
              item.dnaReporting,
              item.rnaReporting,
              item.remark,

            ]))
          ]
          let requireMerge = []
          that.$util.createxlsx({
            mydata,
            fileName: '归档查询',
            dataList: response.rows,
            type: 'orderId',
            requireMerge,
            loading
          })
        })
      }).catch(function () { })
    },
    rowStyle ({ row }) {
      var arr = this.ids
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return 'rowStyle'
        }
      }
    }
  }
}
</script>
<style scoped>
.el-form-item {
  margin-bottom: 10px !important;
}

.app-container {
  height: 85vh;
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}

::v-deep .rowStyle {
  background-color: #a8d6fe !important;
}

::v-deep .el-table__body tr:hover>td {
  background: #a8d6fe !important;
}
.el-picker-panel__body{
    left:1px !important
  }
</style>
